<template>
  <input type="text" v-model="keyWord">
  <h2>{{ keyWord }}</h2>
</template>

<script>
import {ref, customRef} from 'vue';

export default {
  name: 'App',
  setup() {
    function myRef(value, delay) {
      let timer;
      return customRef((track, trigger) => {
        return {
          // 当有人获取数据的时候调用
          get() {
            console.log(`有人正在索取数据，我把${value}给他了`);
            // 通知vue追踪value的变化
            track();
            return value;
          },
          set(newVal) {
            console.log(`有人正在修改数据，要把${value}修改为${newVal}`);
            // 每次开始前先清除先前的定时器来防抖
            clearTimeout(timer);
            // 500ms之后再更新页面（延迟显示输入的数据）这种方式会出现抖动现象，输入的频率高于500ms
            timer = setTimeout(() => {
              // 赋值之后需要再次调用get()方法才能更新值
              value = newVal;
              // 通知vue更新模板
              trigger();
            }, delay);
          }
        }
      });
    }

    // 1. 使用vue提供的ref定义响应式数据
    // let keyWord = ref('');
    // 2. 自定义一个ref实现响应式数据
    let keyWord = myRef('hello', 500);
    return {
      keyWord
    };
  }
}
</script>

<style>
</style>
